<template>
  <!-- 设备验收确认页面 -->
  <div class="equipment-inspected">
    <!--按钮区域 begin-->
    <div class="btns" style="padding: 1em; margin-bottom: 1em; background: #fff">
      <el-select v-model="searchForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
        <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
      </el-select>
      <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
        <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
      </el-select>
      <el-select v-model="searchForm.status" placeholder="验收状态" filterable clearable>
        <el-option v-for="item in ['已验收', '未验收']" :keys="item" :label="item" :value="item"/>
      </el-select>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchForm.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
    </div>
    <!--按钮区域 end-->
    <div class="btns">
      <el-button type="primary" size="small" :disabled="selectedRowKeysItems.length>0?false:true" icon="el-icon-check" @click="inspectedItems">验收</el-button>
      <el-button @click="()=>{this.drawer=true; this.toLogSearch()}" type="primary" size="small" style="float: right; margin-right: 1em">查看验收日志</el-button>
    </div>
    <!--表格卡片区域 begin-->
    <el-card shadow="never">
      <a-table
        size="small"
        :rowKey="record => record.itemId"
        :loading="stockInspectedTable.loading"
        :data-source="stockInspectedTable.data"
        :scroll="stockInspectedTable.data.length > 0 ?{ x: 1600}:{}"
        :row-selection="{ selectedRowKeys: selectedRowKeysItems, onChange: itemsSelectionChange, selections: [{
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              this.selectedRowKeysItems = stockInspectedTable.data.map(item=>{return item.itemId});
            },
          }]}">
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="checkNumber" title="应验收" data-index="checkNumber">
          <template slot-scope="text, record">
            <el-tag type="success">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="inspectedNumber" title="已验收" data-index="inspectedNumber">
          <template slot-scope="text, record">
            <el-tag :type="text == record.checkNumber ? 'success':'warning'">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="item" title="设备名" data-index="item" />
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="supplier" title="供应商" data-index="supplier" />
        <a-table-column :width="300" align="center" ellipsis="true" key="brand" title="品牌" data-index="brand" />
        <a-table-column :width="150" align="center" ellipsis="true" key="model" title="型号" data-index="model" />
        <a-table-column align="center" key="params" ellipsis="true" title="技术参数" data-index="params" />
        <a-table-column :width="100" align="center" key="price" title="单价" data-index="price" />
        <a-table-column :width="100" align="center" ellipsis="true" key="delivery" title="货期" data-index="delivery" />
        <a-table-column :width="100" align="center" ellipsis="true" key="warranty" title="质保期" data-index="warranty" />
        <a-table-column :width="100" align="center" ellipsis="true" key="remark" title="备注" data-index="remark" />
      </a-table>
    </el-card>
    <!--表格卡片区域 end-->

    <!--右边抽屉-->
    <el-drawer
      title="验收操作日志"
      :visible.sync="drawer"
      direction="rtl"
      size="70%"
    >
      <div class="btns" style="padding: 1em; background: #fff">
        <el-select v-model="searchLogForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
          <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
        <el-select v-model="searchLogForm.contractId" placeholder="选择合同" filterable clearable>
          <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
        </el-select>
        <el-input v-model="searchLogForm.item" placeholder="设备名"></el-input>
        <el-date-picker
          style="margin-left: 8px"
          v-model="searchLogForm.time"
          unlink-panels
          value-format="timestamp"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="btns">
        <el-button @click="toLogSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px; float: right">查询</el-button>
        <el-button type="danger" size="small" :disabled="logRowKeysItems.length>0?false:true" icon="el-icon-delete" @click="revokeItems">撤销</el-button>
      </div>
      <a-table
        size="small"
        style="margin-left: 1em; margin-right: 1em"
        :rowKey="record => record.id"
        :loading="stockInspectedLogTable.loading"
        :data-source="stockInspectedLogTable.data"
        :scroll="stockInspectedLogTable.data.length > 0 ?{ x: 800}:{}"
        :row-selection="{ selectedRowKeys: logRowKeysItems, onChange: logSelectionChange, selections: [{
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              this.logRowKeysItems = stockInspectedLogTable.data.map(item=>{return item.id});
            },
          }]}">
        <a-table-column align="center" ellipsis="true" key="item" title="设备名" data-index="item"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="inspectedNumber" title="验收数量" data-index="inspectedNumber"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="inspectedPerson" title="验收人" data-index="inspectedPerson"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="inspectedTime" title="验收时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.inspectedTime)}}
          </template>
        </a-table-column>
        <a-table-column align="center" ellipsis="true" key="time" title="操作时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.time)}}
          </template>
        </a-table-column>
      </a-table>
    </el-drawer>

    <!--模态框-->
    <el-dialog v-el-drag-dialog :title="stockDialog.title" :visible.sync="stockDialog.visible">
      <el-form :model="stockDialog.form"  status-icon>
        <el-form-item :label="stockDialog.title+'数量'" label-width="80px" size="small" prop="number" :disabled="selectedRowKeysItems.length>0?true:false">
          <el-input-number v-model="stockDialog.form.inspectedNumber" :precision="2" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item :label="stockDialog.title+'时间'" label-width="80px" size="small" prop="time">
          <el-date-picker
            v-model="stockDialog.form.inspectedTime"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="验收人" label-width="80px" size="small" prop="operator">
          <el-input v-model="stockDialog.form.inspectedPerson" type="text" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="80px" size="small" prop="remark">
          <el-input v-model="stockDialog.form.inspectedRemark" type="textarea" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="stockDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="stockDialogHandle()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

  import "@/styles/auto-style.css";
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
  import elDragDialog from "@/directive/el-drag-dialog";
  import { dateTimeFormat, dateFormat } from '@/utils/format'

  export default {
    directives: { elDragDialog },
    data() {
      return {
        logRowKeysItems: [],
        logRowKeys: [],
        dateTimeFormat,
        stockInspectedLogTable: {
            data: [],
            loading: false
        },
        searchLogForm: {},
        drawer: false,
        stockDialog: {
            title: '验收',
            form: {},
            visible: false
        },
        selectedRowKeysItems: [],
        url: {
            findStockInspected: '/stock/inspected/findStockInspected',
            batchInspected: '/stock/inspected/batchInspected',
            singleInspected: '/stock/inspected/singleInspected',
            findInspectedLog: '/stock/inspected/findInspectedLog',
            revoke: '/stock/inspected/revoke'
        },
        // 按钮区域表单
        searchForm: {},
        options: {
          projects: [],
          contracts: [],
        },
        stockInspectedTable: {
          data: [],
          loading: false,
        }
      }
    },
    created() {
      this.loadProjects()
    },
    methods: {
      stockDialogHandle(){
        this.stockDialog.form.itemId = this.selectedRowKeysItems[0]
        postActionByQueryString(this.url.singleInspected, this.stockDialog.form)
          .then(resp => {
              this.selectedRowKeysItems = []
              this.stockDialog.form = {}
              this.stockDialog.visible = false
              this.toSearch()
          })
      },
      inspectedItems(){
        if(this.selectedRowKeysItems.length > 1){
            //批量验收
          this.$confirm('验收'+ this.selectedRowKeysItems.length + '项' +'，是否确定选择？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
            postActionByQueryString(this.url.batchInspected, {itemIds : this.selectedRowKeysItems})
                .then(resp => {
                    this.selectedRowKeysItems = []
                    this.toSearch()
                })
          }).catch(() => {
              //this.onSelectChange(ids, rows)
          })
        }else {
            //单个验收
            this.stockDialog.visible = true
        }
      },
      revokeItems(){
        this.$confirm('撤销'+ this.logRowKeysItems.length + '项' +'，是否确定选择？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            postActionByQueryString(this.url.revoke, {ids : this.logRowKeysItems})
              .then(resp => {

              })
              .finally(() => {
                  this.logRowKeysItems = []
                  this.toLogSearch()
                  this.toSearch()
              })
        }).catch(() => {
            //this.onSelectChange(ids, rows)
        })
      },
      itemsSelectionChange(record){
          const itemsId = []
          record.map(item => {
              itemsId.push(item)
          })
          this.selectedRowKeysItems = itemsId
      },
      logSelectionChange(record){
          const ids = []
          record.map(item => {
              ids.push(item)
          })
          this.logRowKeysItems = ids
      },
      //日志查询
      toLogSearch(){
        this.logRowKeysItems = [];
        this.stockInspectedLogTable.loading = true
        if(this.searchLogForm.time){
            this.searchLogForm.startTime = this.searchLogForm.time[0]
            this.searchLogForm.endTime = this.searchLogForm.time[1]
        }
        delete this.searchLogForm.time
        getAction(this.url.findInspectedLog, this.searchLogForm)
        .then(resp => {
            this.stockInspectedLogTable.data = resp.data
            this.stockInspectedLogTable.loading = false
        })
        .catch(()=>{
            this.stockInspectedLogTable.loading = false
        })
      },
      // 按钮区域搜索事件
      toSearch() {
        this.selectedRowKeysItems = []
        this.stockInspectedTable.loading = true
          if(this.searchForm.time){
              this.searchForm.startTime = this.searchLogForm.time[0]
              this.searchForm.endTime = this.searchLogForm.time[1]
          }
          delete this.searchForm.time
        getAction(this.url.findStockInspected, this.searchForm)
        .then(resp => {
            this.stockInspectedTable.data = resp.data
            this.stockInspectedTable.loading = false
        })
        .catch(()=>{
        this.stockInspectedTable.loading = false
        })
      },
      // 查询项目列表
      loadProjects() {
        getAction("/purchase/project/findAllLike")
          .then((resp) => {
            this.options.projects = resp.data
          })
      },
      // 查询合同列表
      loadContracts(proId) {
        getAction('/purchase/contract/findByProjectId', { projectId: proId })
        .then(resp => {
          this.options.contracts = resp.data
        })
      },
      // 项目下拉框 Change 事件
      proSelectChange(id) {
        this.$delete(this.searchForm,'contractId')
        this.loadContracts(id)
      },
    }
  }
</script>
<style lang="scss" scoped>

  .equipment-sign {

  }
</style>

